<template>
  <view class="container">

    <!-- 活动信息 -->
    <view class="activity-info">
      <text class="activity-name">大象中原系列讲座——经典中原</text>
      <text class="activity-time">2025-03-23 09:00~21:30</text>
      <view class="status">
        <text class="status-text">预约成功</text>
        <text class="cancel-btn" @click="handleCancel">×取消预约</text>
      </view>
    </view>
    <!-- 预约码区域 -->
    <view class="qr-code-section">
      <text class="section-title">预约码（向工作人员出示进行核销）</text>
	  <canvas canvas-id="qrcode" class="qr-code" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
    </view>
    <!-- 预约信息 -->
    <view class="reservation-info">
      <text class="section-title">预约信息</text>
      <view class="info-item">
        <text class="label">姓名：</text>
        <text class="value">用户1</text>
      </view>
      <view class="info-item">
        <text class="label">手机：</text>
        <text class="value">15870003762</text>
      </view>
	  <view class="info-item">
	    <text class="label">身份证：</text>
	    <text class="value">33020*******6334</text>
	  </view>
      <view class="info-item">
        <text class="label">提交时间：</text>
        <text class="value">2025-03-26 16:00:09</text>
      </view>
    </view>
  </view>
</template>

<script>
import uQRCode from '@/common/uqrcode.js'
export default {
  data() {
    return {
      qrcodeSize:150,
	  qrcodeSrc: '',
	  qrcodeText:'13675890987',
	  dataParam:{},
	  form:{
		  lotid:'',
		  reservationId:'',
		  phone:''
	  }
    };
  },
  onLoad(option) {
	try{
		this.dataParam = JSON.parse(option.data)
		this.form.lotid = this.dataParam.lotid
		this.form.reservationId = this.dataParam.reservationId
		this.form.phone = this.dataParam.phone
	}catch(e){
		//TODO handle the exception
	}
	
  	this.make();
  },
  methods: {
	  make() {
	  	uni.showLoading({
	  		title: '二维码生成中',
	  		mask: true
	  	})
	  	uQRCode.make({
	  		canvasId: 'qrcode',
	  		text: this.qrcodeText,
	  		size: this.qrcodeSize,
	  		margin: 10,
	  		success: res => {
	  			this.qrcodeSrc = res
	  		},
	  		complete: () => {
	  			uni.hideLoading()
	  		}
	  	})
	  },
	  
    // 取消预约
    handleCancel() {
      uni.showModal({
        title: '提示',
        content: '确定要取消预约吗？',
        success: (res) => {
          if (res.confirm) {
			  this.$rqt.cancelReservation(this.form).then((res) => {
			  	if (res.code == 200) {
			  			
			  		uni.hideLoading()
			  	}
			  	uni.hideLoading()
			  })
			  
            uni.showToast({ title: '预约已取消', icon: 'none' });
          }
        }
      });
    },

    // 返回首页
    handleBackHome() {
      uni.switchTab({ url: '/pages/index/index' });
    },

    // 加入手机日程
    handleAddToCalendar() {
      uni.showToast({ title: '已加入手机日程', icon: 'none' });
    }
  }
};
</script>

<style lang="scss">
/* 全局样式 */
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 顶部导航栏 */
.navbar {
  height: 120rpx;
  background-color: #e64340;
  display: flex;
  align-items: center;
  justify-content: center;
  .navbar-title {
    font-size: 36rpx;
    color: #fff;
    font-weight: bold;
  }
}

/* 活动信息 */
.activity-info {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  .activity-name {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
  }
  .activity-time {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
    display: block;
  }
  .status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .status-text {
      font-size: 28rpx;
      color: #07c160;
    }
    .cancel-btn {
      font-size: 28rpx;
      color: #e64340;
    }
  }
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: space-between;
  padding: 0 30rpx;
  margin-bottom: 20rpx;
  .btn {
    width: 48%;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #333;
    background-color: #fff;
    border-radius: 8rpx;
    &::after {
      border: none;
    }
  }
}

/* 预约码区域 */
.qr-code-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  .section-title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
    display: block;
  }
  .qr-code {
    width: 300rpx;
    height: 300rpx;
    display: block;
    margin: 0 auto;
  }
}

/* 预约信息 */
.reservation-info {
  background-color: #fff;
  padding: 30rpx;
  .section-title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
    display: block;
  }
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    .label {
      font-size: 28rpx;
      color: #333;
      width: 150rpx;
    }
    .value {
      font-size: 28rpx;
      color: #666;
    }
  }
}
</style>